<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>免费商城管理平台</title> <#include "../common/header.ftl"/>
    <script type="text/javascript" src="/js/plugins/jquery.form.js"></script>
    <script type="text/javascript" src="/js/plugins/jquery.twbsPagination.min.js"></script>
    <script type="text/javascript" src="/js/plugins/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript">
        function changeCatalog(obj) {
            var catalogId = $(obj).val();
            if (catalogId) {
                //重新加载商品的属性面板
                $('#productPropertyPanel').load(
                        '/product/propertyValue/get/'
                        + catalogId);
                //重新加载商品sku
                /* $('#productSkuPanel').load(
                    '/getSkuPropertyPanel.do?catalogId='
                            + catalogId); */
            }
            else {
                //商品属性面板
                $('#productPropertyPanel').empty();
                //sku面板
                $('#productSkuPanel').empty();
            }
        }
    </script>
</head>
<body>
<div class="container">
<#include "../common/top.ftl"/>
    <div class="row">
        <div class="col-sm-3">
        <#--菜单进行选择-->
        <#assign currentMenu="product_list" />
			<#include "../common/menu.ftl" /></div>
        <div class="col-sm-9">
            <div class="page-header">
                <h3>商品列表</h3>
            </div>

            <div class="panel panel-default">
                <div id="myTabs">

                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#base" aria-controls="base" role="tab"
                                                                  data-toggle="tab">基本信息</a></li>
                        <li role="presentation"><a href="#detail" aria-controls="detail" role="tab" data-toggle="tab">商品详情</a>
                        </li>
                        <li role="presentation"><a href="#image" aria-controls="image" role="tab"
                                                   data-toggle="tab">商品相册</a></li>
                        <li role="presentation"><a href="#property" aria-controls="property" role="tab"
                                                   data-toggle="tab">商品属性</a></li>
                        <!-- <li role="presentation"><a href="#sku" aria-controls="sku" role="tab" data-toggle="tab">sku</a></li>-->
                    </ul>

                    <!-- 提交商品保存表单 -->
                    <form action="/product/saveproduct" method="post" id="productSaveForm">
                        <!-- Tab panes -->
                        <div class="tab-content">

                            <div role="tabpanel" class="tab-pane active" id="base">
                                <!-- 基本信息的页面 -->
                                <div style="padding-bottom: 10px;padding-left: 10px;padding-right: 10px;padding-top: 10px;">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label>商品名称</label> <input readonly="readonly" class="form-control"
                                                                           name="product.name"
                                                                           value="${(product.name)!""}">
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label>商品编号</label> <input readonly="readonly" class="form-control"
                                                                           name="product.code"
                                                                           value="${(product.code)!""}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label>所属品牌</label>
                                                <input class="form-control" readonly="readonly" name="brand.chineseName"
                                                       value="${(product.brand.chineseName)!""}">
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label>所属分类</label>
                                                <input class="form-control" readonly="readonly" name="catalog.name"
                                                       value="${(product.catalog.name)!""}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label>市场售价</label> <input readonly="readonly" class="form-control"
                                                                           name="product.marketPrice"
                                                                           value="${(product.marketPrice)!""}">
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label>基础售价</label> <input readonly="readonly" class="form-control"
                                                                           name="product.basePrice"
                                                                           value="${(product.basePrice)!""}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <label>商品标签</label>
                                                <textarea readonly="readonly" class="form-control" rows="3"
                                                          placeholder="以逗号分隔"
                                                          name="product.impressions"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div role="tabpanel" class="tab-pane" id="detail">
                                <!-- 商品详情 -->
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <div>
                                                <#if (productDesc.details)?? && productDesc.details != "" >
                                                    ${productDesc.details}
                                                <#else>
                                                <div style="padding-top: 10px">
                                                    <h3>&nbsp;该商品暂无详情!</h3>
                                                </div>
                                                </#if>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div role="tabpanel" class="tab-pane" id="image">
                                <div style="padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;">
                                    <#if (productImages?size>0)>
                                        <#list productImages as img>
                                            <img style="height: 200px;width: 200px;" src="${img.imagePath}"/>
                                        </#list>
                                    <#else>
                                        <h3>该商品暂无图片!</h3>
                                    </#if>
                                </div>
                            </div>
                            <div role="tabpanel" class="tab-pane" id="property">
                                <div style="padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;">
                                    <table class="table table-bordered catalog-property-table">
                                        <thead>
                                        <tr>
                                            <th>名称</th>
                                            <th>值</th>
                                        </tr>
                                        </thead>
                                        <tbody id="productPropertyPanel">
                                        <#list productCatalogValue as value>
                                        <tr>
                                            <th>${value.name}</th>
                                            <th>${value.value}</th>
                                        </tr>
                                        </#list>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <!-- <div role="tabpanel" class="tab-pane" id="sku">
                                <div id="productSkuPanel" style="padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;">

                                </div>
                            </div> -->
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>